<template>
  <transition>
    <div class="insurance-price-info">
    <div class="app-main">
      <div class="module-info" style="padding-top:6px;">
        <dd class="item item-info" style="width: 50%">车主：<span class="item-value">庄某某</span></dd>
        <dd class="item item-info" style="width: 50%">车牌号：<span class="item-value">粤A0000</span></dd>
        <dd class="item item-info">手机号码：<span class="item-value">13765655222</span></dd>
        <dd class="item item-info">保障日期：<span class="item-value">2017-12-15至2018-12-15</span></dd>
        <dd class="item item-info">保险公司：<span class="item-value">中国平安保险公司</span></dd>
      </div>
      <div class="module-info">
        <div class="info-header">商业保险详情<span class="info-header-right">小计：<span class="price">￥2350.09</span></span></div>
         <dd class="item">
            <span class="item-content item-left">险种</span>
            <span class="item-content item-middle">保额</span>
            <span class="item-content item-right">保费</span>
          </dd>
        <dd class="item item-info">
          <span class="item-content item-left">第三者责任险</span>
          <span class="item-content item-middle item-value">67651.25</span>
          <span class="item-content item-right item-value">616.75</span>
        </dd>
        <dd class="item item-info">
          <span class="item-content item-left">玻璃单独破碎险</span>
          <span class="item-content item-middle item-value">67651.25</span>
          <span class="item-content item-right item-value">616.75</span>
        </dd>
        <dd class="item item-info">
          <span class="item-content item-left" style="width: 60%">机动车辆损失不计免赔</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right item-value">616.75</span>
        </dd>
        <dd class="item-footer">
          车辆损失险（￥270）、第三者（￥270.5）、司机（￥20.5）、乘
          客（￥20.5）、全车盗抢险（￥20.5）
        </dd>
      </div>
      <div class="module-info">
        <div class="info-header">交强险车船税<span class="info-header-right">小计：<span class="price">￥2350.09</span></span></div>
        <dd class="item">
          <span class="item-content item-left">险种</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right">保费</span>
        </dd>
        <dd class="item item-info">
          <span class="item-content item-left">交强险</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right item-value">1000</span>
        </dd>
        <dd class="item item-info">
          <span class="item-content item-left">车船税</span>
          <span class="item-content item-middle"></span>
          <span class="item-content item-right item-value">1000</span>
        </dd>
      </div>
      <div class="module-info">
        <div class="info-header">其他信息</div>

        <dd class="item item-info">商业险保单号：<span class="item-value">558754444444</span></dd>
        <dd class="item item-info" >交强险保单号：<span class="item-value">52155555554</span></dd>
        <dd class="item item-info">交强险开始日期：<span class="item-value">2017-02-12</span></dd>
        <dd class="item item-info">交强险到期日期：<span class="item-value">2018-02-12</span></dd>
        <dd class="item item-info">商业险保障日期：<span class="item-value">2018-02-12至2019-10-10</span></dd>
        <dd class="item item-info">投保人姓名：<span class="item-value">庄</span></dd>
        <dd class="item item-info">投保人证件类型：<span class="item-value">身份证</span></dd>
        <dd class="item item-info">投保人证件号：<span class="item-value">554555555255555</span></dd>
      </div>
      <div class="module-info">
        <div class="info-header">车辆信息</div>

        <dd class="item item-info">车牌号：<span class="item-value">粤A0001</span></dd>
        <dd class="item item-info">发动机号：<span class="item-value">6544544455555</span></dd>
        <dd class="item item-info">品牌型号：<span class="item-value">奥迪Q3运动版</span></dd>
        <dd class="item item-info">车辆识别号：<span class="item-value">55454145</span></dd>
        <dd class="item item-info">排量：<span class="item-value">1.2T</span></dd>
        <dd class="item item-info">车辆注册日期：<span class="item-value">2017-10-10</span></dd>
        <dd class="item item-info">座位数量：<span class="item-value">6个</span></dd>
        <dd class="item item-info">号牌底色：<span class="item-value">黑色</span></dd>
        <dd class="item item-info">新车购置价格：<span class="item-value">100万</span></dd>
        <dd class="item item-info">车主姓名：<span class="item-value">庄</span></dd>

      </div>
      </div>
    </div>
  </transition>
</template>

<script>
  import { Swipe, SwipeItem} from 'mint-ui';
export default {
  data () {
    return {}
  },
  mounted(){

  },
  methods:{
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style>
  .insurance-price-info .app-main{
    padding:0 0 16px;
  }
  .insurance-price-info .button-content-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: #fff;
    display: flex;
    box-shadow: 0px -6px 4px 0px rgba(0, 0, 0, 0.03);
  }
  .insurance-price-info .button-content-bottom .mint-button{
    display: flex;
    flex: 1;
    border-radius: 0;
    justify-content: center;
    font-size: 16px;
    box-shadow: none;
    height: 50px;
  }
  .insurance-price-info .module-car{
    margin:0 0 10px;
  }
  .insurance-price-info .module-info{
    background: #fff;
    display: flex;
    flex-wrap: wrap;
    padding:0 0 10px 10px;
    margin:0 0 10px;
  }
  .insurance-price-info .module-info .info-header{
    width: 100%;
    padding:12px 12px 12px 0;
    margin:0 0 6px;
    font-size: 15px;
    border-bottom:1px solid #f5f5f5;
  }
  .insurance-price-info .module-info .info-header-right{
    float: right;
  }
  .insurance-price-info .module-info .price{
    color: red;
  }
  .insurance-price-info .module-info .item{
    display: flex;
    width: 100%;
    margin: 0;
    padding:6px 12px 6px 0;
    font-size: 14px;
  }
  .insurance-price-info .module-info .item .item-value{
    color: #333;
  }
  .insurance-price-info .module-info .item-content{
    width: 33.2%;
  }
  .insurance-price-info .module-info .item-info{
    color: #888;
  }
  .insurance-price-info .module-info .item-content.item-middle{
    text-align: center;
  }
  .insurance-price-info .module-info .item-content.item-right{
    text-align: right;
  }
  .insurance-price-info .module-info .item-footer{
    margin: 0;
    padding:6px 0;
    font-size: 14px;
    color: #666;
    text-align: left;

  }
</style>
